// 팝업 레이아웃
var popup       	= '';
// 풀팝업 레이아웃
var fullPopup   	= {};

// 팝업에 들어갈 html
var phtml       	= '';

var sound_paused 	= true;
var images      	= new Array();
var phtmlArr		= {};

var myScroll;
function loaded() {
	$('div[id^=stext]').each(function(i){
		myScroll = new iScroll($(this).attr('id'),{ bounce:false, fixedScrollbar:true });
	});
     
}
window.addEventListener('load', loaded, false);
function startAutoplay(){
	
	var ua = window.navigator.userAgent.toLowerCase(); 

	if ( /ipad/.test(ua) ||/iphone/.test(ua)) {
	    var videos = document.getElementsByTagName("video");
	    for(var i=0, n=videos.length; i<n; i++){
	        var p_ap = videos[i].getAttribute("ap");
	    	if(p_ap == "autoplay" || p_ap == "skip"){
	            videos[i].play();
	            
	            break;
	        }
	    }
	}
    
    var audios = document.getElementsByTagName("audio");
    for(var i=0, n=audios.length; i<n; i++){
    	if(audios[i].getAttribute("ap") == "autoplay"){
    		var simg = audios[i].getAttribute("id").replace("_a", "");
    		var simgel = document.getElementById(simg);
    		toggleSoundImg(simgel, true);
    		
            audios[i].play();
            sound_paused = false;
            
            break;
        }
    }
}

function stopAutoplay(){
	var videos = document.getElementsByTagName("video");
    for(var i=0, n=videos.length; i<n; i++){
    	if(!videos[i].paused){
            videos[i].pause();
            
            break;
        }
    }
    
    var audios = document.getElementsByTagName("audio");
    for(var i=0, n=audios.length; i<n; i++){
    	if(audios[i].getAttribute("ap") == "autoplay"){
    		var simg = audios[i].getAttribute("id").replace("_a", "");
    		var simgel = document.getElementById(simg);
    		toggleSoundImg(simgel, false);
    		
            audios[i].pause();
            sound_paused = true;
            
            break;
        }
    }
}

function imagePreLoad(iurl){
	var preLoadFlg = true; 
	
	$('body #tempImg img').each(function(i){
		if ($(this).attr('src') == iurl) {
			preLoadFlg = false;
			return false;
		}
	});
	
	if (preLoadFlg) {
		$('<img />').attr('src', iurl).appendTo('body #tempImg').css('display','none');
	}
}

/**
 * 이미지 슬라이드 팝업html을 만든다.
 */
function makeImgSlidePopup(u, w, h, is) {
	var result = "";
	var width = (w.indexOf("px")>-1)?w.replace("px", ""): w;
	var height = (h.indexOf("px")>-1)?h.replace("px", ""): h;
	var sed = u.split(",");
	var imgsizes = is.split(",");
	
	result += '<div id="imgscroll-content" style="width: 728px; height: 748px; float: left; margin-bottom: 20px;"><div id="imgscroll-imgs">'
	
	$.each(sed, function(idx, value){
    	var sp = value.split("/"); 
    	var slast = sp.length-1;
    	var isrc = "./"+sp[slast];
    	
    	var mtop = (728 - imgsizes[idx].split(":")[1])/2;
    	
    	result += ('<div class="imgscroll-img" id="imgscroll-img" style="width: 728px; height: 728px; ">'
    			+'<img src="'+isrc+'" style="width: '+imgsizes[idx].split(":")[0]+'px; margin-top: '+mtop+'px;" />'
    			+'</div>');
    });
	
	result += '</div><div style="width: '+width+'px; height: '+height+'px;"></div><div id="imgscroll-navi" style="text-align: center; height: 20px;">';
	result += '<img src="../../icon/2.png" style="margin-right: 5px;">';

	for(var i=0,n=sed.length-1; i<n; i++){
        if(i < n-1)
            result += '<img src="../../icon/3.png" style="margin-right: 5px;">';
        else
            result += '<img src="../../icon/3.png">';
	}
	result += '</div></div>';
	
	return result;
}

function toggleSoundImg(ele, isplay){
	var current_img = ele.getAttribute("src");
	
	if(isplay) {
		if(current_img.indexOf("p20") > -1) {
	   		ele.setAttribute("src", current_img.replace("p20", "p21"));
		} else if(current_img.indexOf("p22") > -1) {
	   		ele.setAttribute("src", current_img.replace("p22", "p23"));
		} 
	} else {
		if(current_img.indexOf("p21") > -1) {
	   		ele.setAttribute("src", current_img.replace("p21", "p20"));
		} else if(current_img.indexOf("p23") > -1) {
			ele.setAttribute("src", current_img.replace("p23", "p22"));
		}
	}
}

$(function() {
	var ua = window.navigator.userAgent.toLowerCase(); 

	if ( /ipad/.test(ua)) { 
		document.getElementById("canvasbg").style.backgroundImage ="";
	} else if( /iphone/.test(ua)){
		var content = $("meta[name='viewport']").attr('content');
    	content += 'initial-scale=0.417;';
    	content += 'maximum-scale=0.7;';
    	content = content.replace('target-densitydpi=device-dpi;', '');
  
    	$("meta[name='viewport']").attr('content', content);
	} else {
		var videos = document.getElementsByTagName("video");
		for(var i = 0; i < videos.length; i++){
			//videos[i].removeAttr('controls');
		}
	}
	
    $("div[nbel='imageslide']").each(function (index, item) {
        if(typeof initImageScroll == 'function'){
            var ele = $(this);
            initImageScroll(ele);
        }
    });
    
    // 팝업일 경우
    $("*[nbel='imageslide'][m='P']").each(function(index, ele){
    	var sp = ele.getAttribute("u").split(",")[0].split("/"); 
       	var slast = sp.length-1; 
       	imagePreLoad(sp[slast]);
    	
        var cuel = $(this);
        
        phtmlArr[cuel.attr("id")] = makeImgSlidePopup(ele.getAttribute("u"), ele.getAttribute("w"), ele.getAttribute("h"), ele.getAttribute("is"));
        
        cuel.click(function(e){ 
	        var ndiv = $("<div id='popup_layout'/>");
	        ndiv.append(popup);
	        
	
	        ndiv.find("#lightbox-div").append(phtmlArr[cuel.attr("id")]);
	        
	        $("#canvas").prepend(ndiv);
	        
	        var msgbox = ndiv.find("#lightbox-div-wrap");

	        var x = ($("#canvas").width() - msgbox.width()) / 2;
	        var y = ($("#canvas").height() - msgbox.height()) / 2;
	        msgbox.css('top', y+"px");
	        msgbox.css('left', x+"px");
	        
	        if(typeof initImageScroll == 'function')
	            initImageScroll(ndiv[0]);
	        
	        $("#closepopup").click(function(){
	            $("#canvas").find("#lightbox-wrapper").remove();
	            window.location.href = "|CLOSE";
	            return false;
	        });
	        
	        window.location.href = "|POPUP";
	        
	        return false;
        });
    });
    
    // 풀팝업일 경우
    $("*[nbel='imageslide'][m='F']").each(function(index, ele){
       	var sp = ele.getAttribute("u").split(",")[0].split("/"); 
       	var template = ele.getAttribute("tpl"); 
       	var slast = sp.length-1; 
       	imagePreLoad(sp[slast]);
        
        var cuel = $(ele);
        
        phtmlArr[cuel.attr("id")] = makeImgSlidePopup(ele.getAttribute("u"), ele.getAttribute("w"), ele.getAttribute("h"), ele.getAttribute("is"));
        var sed = ele.getAttribute("u").split(",");
        var imgsizes = ele.getAttribute("is").split(",");
        
        cuel.click(function(e){
        	var ndiv = $("<div id='popup_layout'/>");
        	
	        ndiv.append(fullPopup[template]);
	        
	        if (template == 'tmpf_02.html') {
	        	
	        	var html  = '<div id="imgscroll-content" style="width: 768px; height: 1024px;">';
	        	html += '<div id="imgscroll-imgs" style="position: absolute;">';
	        	
	        	$.each(sed, function(idx, value){
	            	var sp = value.split("/"); 
	            	var slast = sp.length-1;
	            	var isrc = "./"+sp[slast];
	            	
	            	var mtop = ($("#canvas").height() - imgsizes[idx].split(":")[1])/2;
	            	
		        	html += '<div id="imgscroll-img" class="imgscroll-img" style="width: 768px; height: 1024px; ">';
		        	html += '	<img style="width: '+imgsizes[idx].split(":")[0]+'px; margin-top: '+mtop+'px;" src="'+isrc+'">';
		        	html += '</div>';
		        	
	            });
	        	
	        	html += '</div>';
	        	html += '</div>';
	        	
	        	phtmlArr[cuel.attr("id")] = html;
	        	ndiv.find("#lightbox-div").append(html);
	        	$("#canvas").prepend(ndiv);
	        	
	        	var closeHtml = '';
	        	closeHtml += '<div id="closeLayer" style="position:absolute; z-index: 999999; right: 0px;">';
	        	closeHtml += '	<img id="closefullpopup" src="../../icon/xbotton2.png">';
	        	closeHtml += '</div>';
	        	$("#canvas").prepend(closeHtml);
	        	
	        	var naviHtml = '';
	        	naviHtml += '<div id="fullpopup-temp2-navi" style="position:absolute; text-align: center; height: 20px; bottom:20px; width: 768px; z-index: 999999;">';
	        	naviHtml += '	<img style="margin-right: 5px; width: 8px; height: 8px;" src="../../icon/2.png">';
	        	
	        	for(var i=0,n=sed.length-1; i<n; i++){
	                if(i < n-1) {
	                	naviHtml += '<img src="../../icon/3.png" style="margin-right: 5px; width: 8px; height: 8px;">';
	                } else {
	                	naviHtml += '<img src="../../icon/3.png" style="width: 8px; height: 8px;">';
	        		}
	        	}
	        	
	        	naviHtml += '</div>';
	        	$("#canvas").prepend(naviHtml);
	        	
	        } else {
	        	var ti = cuel.attr("ti");
	            ti = (ti == "")?"&nbsp;":ti;
	            
		        ndiv.find("#fullpopup_title").css("padding", "0px").html(ti);
		        ndiv.find("#fullpopup_contents").append(phtmlArr[cuel.attr("id")]);
		        
		        var descs =cuel.attr("d").split("\n");
	            var deshtml = "";
	            $.each(descs, function(idx, el){
	                deshtml += "<h3>" + el + "</h3>";
	            });
	            
		        ndiv.find("#fullpopup_description").html(deshtml);
		        
		        $("#canvas").prepend(ndiv);
	        }
	        
	        $("#closefullpopup").click(function(){
	            ndiv.remove();
	            
	            if (template == 'tmpf_02.html') {
		            $('#closeLayer').remove();
		            $('#fullpopup-temp2-navi').remove();
	            }
	            
	            window.location.href = "|CLOSE";
	            return false;
	        });
	            
	        if(typeof initImageScroll == 'function')
	            initImageScroll(ndiv[0]);
	
	        window.location.href = "|POPUP";
	        return false;   
        });
    });
    
    // 풀팝업일 경우
    $("*[nbel='image'][m='F']").each(function(index, ele){
    	imagePreLoad(ele.getAttribute("u"));
    	var template = ele.getAttribute("tpl");
    	
    	var cuel = $(ele);
    	
    	cuel.click(function(e){
            var ndiv = $("<div id='popup_layout'/>");
            
            ndiv.append(fullPopup[template]);
            
	        if (template == 'tmpf_02.html') {
	        	
	        	var imgsize = ele.getAttribute("is");
	        	
	        	var left = ( $("#canvas").width() - imgsize.split(":")[0] ) / 2;
            	var top = ( $("#canvas").height() - imgsize.split(":")[1] ) / 2;
            	
            	var html  = '<div id="imgscroll-content" style="width: 768px; height: 1024px; text-align:center; ">';
	        	html += '<div style="position: absolute; width:' + imgsize.split(":")[0] + 'px; height: ' + imgsize.split(":")[1] + 'px; left:' + left + 'px;  top:' + top + 'px;">';
		        html += '<img src="'+cuel.attr("u")+'">';
		        html += '</div>';
		        
		        html += '</div>';
		        
	        	ndiv.find("#lightbox-div").append(html);
	        	
	        	$("#canvas").prepend(ndiv);
	        	
	        	var closeHtml = '';
	        	closeHtml += '<div style="position: relative; z-index: 999; float: right;">';
	        	closeHtml += '	<img id="closefullpopup" src="../../icon/xbotton2.png">';
	        	closeHtml += '</div>';
	        	$("#imgscroll-content").prepend(closeHtml);
	        	
	        	$("#imgscroll-content").click(function(){
		            ndiv.remove();
		            window.location.href = "|CLOSE";
		            return false;
		        });
	        } else {
	        	var ti = cuel.attr("ti");
	            ti = (ti == "")?"&nbsp;":ti;
	            
		        ndiv.find("#fullpopup_title").css("padding", "0px").html(ti);
		        var cts = '<img src="./'+cuel.attr("u")+'" />';
	            ndiv.find("#fullpopup_contents").append(cts);
	            
	            var descs =cuel.attr("d").split("\n");
	            var deshtml = "";
	            $.each(descs, function(idx, el){
	                deshtml += "<h3>" + el + "</h3>";
	            });
	            
	            ndiv.find("#fullpopup_description").html(deshtml);
	            
	            $("#canvas").prepend(ndiv);
	        }	        
            
            $("#closefullpopup").click(function(){
                ndiv.remove();
                window.location.href = "|CLOSE";
                return false;
            });
            
            window.location.href = "|POPUP";
            return false;      
        });
    });
    
    var $icmovies = $("*[nbel='movie'][icmovie='icmovie']");	// 이미지체인저위에 무비가 올라가는 경우
    
    $icmovies.each(function(index, ele){
        if(index == 0) {
            ele.style.opacity = 1;
            ele.style.zIndex = 0;
        } else {
            ele.style.opacity = 0;
            ele.style.zIndex = -1;            
        }
    });
    
    var $icmaps = $("*[nbel='map'][icmap='icmap']");//.css("opacity", 0);
    
    $icmaps.each(function(index, ele){
        if(index == 0) {
            ele.style.opacity = 1;
            ele.style.zIndex = 0;
        } else {
            ele.style.opacity = 0;
            ele.style.zIndex = -1;            
        }
    });
    
    // 이미지 체인저
    $("div[nbel='imagechangerthumb']").click(function(e){
        var targetid = this.id.split("-")[0];
        
        if($icmovies.length > 0) {
            var icmovie = parseInt(this.id.split("-")[1]);
            
            $icmovies.each(function(index, ele){
                if(index == icmovie) {
                    ele.style.opacity = 1;
                    ele.style.zIndex = 0;
                } else {
                    ele.style.opacity = 0;
                    ele.style.zIndex = -1                 
                }
            });
        }
        
        if($icmaps.length > 0) {
            var icmap = parseInt(this.id.split("-")[1]);
            
            $icmaps.each(function(index, ele){
                if(index == icmap) {
                    ele.style.opacity = 1;
                    ele.style.zIndex = 0;
                } else {
                    ele.style.opacity = 0;
                    ele.style.zIndex = -1                 
                }
            });
        }
        
        document.getElementById(targetid).src = this.getAttribute("u");
        return false;
    });
    
    // 무비 풀팝업일 경우
    $("*[nbel='movie'][m='F']").click(function(e){
        if(this.style.opacity != "0") {
            var mfile = this.getAttribute("u");
        
            window.location.href = "|" + mfile + "|MOVIE";
        }
        return false;      
    });
    
    // 사운드일 경우
    $("img[nbel='sound']").each(function(index, ele){
    	var cuel = $(ele);
    	var eid = ele.getAttribute("id");
        var soel = document.getElementById(eid+"_a");
        
        soel.addEventListener('ended',function () {
        	toggleSoundImg(ele, false);
        },false);
    	
    	cuel.click(function(e){
	        
	        if(soel.paused){
	        	toggleSoundImg(ele, true);
	            soel.play();
	        } else {
	        	toggleSoundImg(ele, false);
	            soel.pause();
	        }
	        
	        return false;
    	});
    });
    
    // 비디오일 경우
    $("div[nbel='movie'][m!='F']").click(function(){
        var vdo = this.getElementsByTagName("video")[0];
        var timg = this.getElementsByTagName("img")[0];
        var p_ap = vdo.getAttribute("ap");
        
        if("skip" == p_ap) {
            $(this).remove();
        } else {
            if(vdo.paused){
                if(timg)timg.style.opacity = 0;
                vdo.play();
            } else {
                vdo.pause();
            }
        }
            
        return false;
    });
    
    $("video").each(function(index, ele){
    	var p_ap = ele.getAttribute("ap");
    	
    	if("skip" == p_ap) {
	    	ele.addEventListener('ended', function () {  
				$(this).parent().remove();  
	    	}, false); 
    	}
    });
    
    $("*[nbel='map'][tagmap='tagmap']").css("opacity", 0);
    
    $("*[nbel='map'][mt='info']").click(function(e){
        var ndiv = $("<div id='popup_layout'/>");
        
        var cuel = $(this);
        
        var title = cuel.attr("title");
        var address = cuel.attr("addr");
        var tel = cuel.attr("tel");
        
        ndiv.append(fullPopup['tmpf_01.html']);
        
        ndiv.find("#fullpopup_contents").css("width", "768px");
        ndiv.find("#fullpopup_contents").css("height", "837px");
        
//        ndiv.find("#fullpopup_title").html(title);
        
        ndiv.find("#fullpopup_title").after('<div style="margin-bottom: 20px;"><img src="../../icon/icon_p26.png" style="margin-left: 50px; margin-right: 10px;"><font style="font-size: 14px; color: gray;">' + tel + '</font></div>'); 
        ndiv.find("#fullpopup_title").after('<div style="margin-bottom: 20px;"><img src="../../icon/icon_p25.png" style="margin-left: 50px; margin-right: 10px;"><font style="font-size: 14px; color: gray;">' + address + '</font></div>'); 
        ndiv.find("#fullpopup_title").after('<h3 style="margin-top: 0px; margin-left: 20px;">' + title + '</h3>'); 
        
        ndiv.find("#fullpopup_title").parent().css("padding", "0px");
        ndiv.find("#fullpopup_title").remove();
        
        var wr = $("<div style='width: 100%; height: 837px'></div>");
        wr.append('<div id="map_canvas" style=" width: 100%; height: 837px;"></div>');
        
        ndiv.find("span").remove();
        ndiv.find("#fullpopup_contents").append(wr);
        //ndiv.find("#fullpopup_description").html(cuel.attr("d"));
            
        $("#canvas").prepend(ndiv);
        
        $("#closefullpopup").click(function(){
            ndiv.remove();
            window.location.href = "|CLOSE";
            return false;
        });
        
        var pos = "";
        
        if(this.getAttribute("latitude")){
            var my_lat=this.getAttribute("latitude");
            var my_lng=this.getAttribute("longitude");
                    
            pos= my_lat+','+my_lng;
            var center = new google.maps.LatLng(my_lat, my_lng);
            
            $('#map_canvas').gmap().bind('init', function(ev, map) {
                var cuel = $(this);
                cuel.gmap('option', 'center', center); 
                cuel.gmap('option', 'zoom', 17);
                cuel.gmap('addMarker', { 'position': pos, 'bounds': false }).click(function() {
                    //$('#map_canvas').gmap('openInfoWindow', { 'content': title }, this);
                });
                //window.location.href = "|POPUP";
            });
    
        
        } else {
            var geocoder = new google.maps.Geocoder();
            var address = cuel.attr("addr");
            
            $.ajaxSetup({async:false});
            
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var my_lat=results[0].geometry.location.lat();
                    var my_lng=results[0].geometry.location.lng();
    
                    pos= my_lat+','+my_lng;

                    var center = new google.maps.LatLng(my_lat, my_lng);
                    
                    $('#map_canvas').gmap().bind('init', function(ev, map) {
                        var cuel = $(this);
                        cuel.gmap('option', 'center', center); 
                        cuel.gmap('option', 'zoom', 17);
                        cuel.gmap('addMarker', { 'position': pos, 'bounds': false }).click(function() {
                            //$('#map_canvas').gmap('openInfoWindow', { 'content': title }, this);
                        });
                        
                        //window.location.href = "|POPUP";
                    });
                    
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }
        
        //setTimeout('window.location.href = "|POPUP"', 500);
        window.location.href = "|POPUP";
        return false; 
     });
     
     $("*[nbel='map'][mt='api']").click(function(e){
        var mapi = this.getAttribute("mapapi");
        
        window.location.href = "|" + mapi + "|MAP";
        return false; 
     });
     
     /*$("img[nbel='info'][mt='info']").click(function(e){
        var ndiv = $("<div id='popup_layout'/>");
        var cuel = $(this);
        
        ndiv.append(fullPopup);
        
        ndiv.find("#fullpopup_title").html(cuel.attr("title"));
        
        var tmpimg = new Image();
        tmpimg.src = './'+cuel.attr("selfile");
        images.push(tmpimg);
        
        var cts = '<img src="./'+cuel.attr("selfile")+'" />';
        ndiv.find("#fullpopup_contents").append(cts);
        ndiv.find("#fullpopup_description").html(cuel.attr("desc"));
            
        $("#canvas").prepend(ndiv);
        
        $("#closefullpopup").click(function(){
            ndiv.remove();
            window.location.href = "|CLOSE";
            return false;
        });
        
        setTimeout('window.location.href = "|POPUP"', 500);
        
        //window.location.href = "|POPUP";
        return false;  
     });*/
     
     $("*[nbel='info'][mt='info']").each(function(index, ele){
        var cuel = $(ele);
        var template = ele.getAttribute("seltmp");
        
        imagePreLoad(cuel.attr("selfile"));
        
        cuel.click(function(){
            var ndiv = $("<div id='popup_layout'/>");
            
            ndiv.append(fullPopup[template]);
            
            if (template == 'tmpf_02.html') {
            	var newImg = new Image();
	        	newImg.src = cuel.attr("selfile");
	        	var height = parseInt(newImg.height, 0);
	        	
				var imgsize = ele.getAttribute("is");
            	var margin = ( $("#canvas").height() - imgsize.split(":")[1] ) / 2;
            	
            	var html  = '<div id="imgscroll-content" style="width: 768px; height: 1024px; text-align:center; ">';
	        	
	        	html += '<div style="position: absolute; width: 768px; height: 1024px; margin:' + margin + 'px 0;">';
		        html += '<img src="'+cuel.attr("selfile")+'">';
		        html += '</div>';
		        
		        html += '</div>';
	        	
	        	ndiv.find("#lightbox-div").append(html);
	        	
				$("#canvas").prepend(ndiv);
				
				var closeHtml = '';
	        	closeHtml += '<div style="position: relative; z-index: 999; float: right;">';
	        	closeHtml += '	<img id="closefullpopup" src="../../icon/xbotton2.png">';
	        	closeHtml += '</div>';
	        	$("#imgscroll-content").prepend(closeHtml);
	        	
	        	$("#imgscroll-content").click(function(){
		            ndiv.remove();
		            window.location.href = "|CLOSE";
		            return false;
		        });
	        	
            } else {
	            var ti = cuel.attr("title");
	            ti = (ti == "")?"&nbsp;":ti;
	            
		        ndiv.find("#fullpopup_title").css("padding", "0px").html(ti);
	        
	            var cts = '<img src="./'+cuel.attr("selfile")+'" />';
	            ndiv.find("#fullpopup_contents").append(cts);
	            
	            var descs =cuel.attr("desc").split("\n");
	            var deshtml = "";
	            $.each(descs, function(idx, el){
	                deshtml += "<h3>" + el + "</h3>";
	            });
	            
	            ndiv.find("#fullpopup_description").html(deshtml);
	            
	            $("#canvas").prepend(ndiv);
            }
            
            $("#closefullpopup").click(function(){
                ndiv.remove();
                window.location.href = "|CLOSE";
                return false;
            });
        
            window.location.href = "|POPUP";
            
            return false;
        });
     });
     
     $("*[nbel='info'][mt='api']").click(function(e){
        var iapi = this.getAttribute("infoapi");
        
        window.location.href = "|" + iapi + "|INFO";
        return false; 
     });
     
     $("*[nbel='link'][t='page']").click(function(e){
        var pageId = this.getAttribute("pid");
        
        window.location.href = "|" + pageId + "|PAGE";
        return false; 
     });
     
     $("*[nbel='link'][t='webview']").click(function(e){
        var page = this.getAttribute("p");
        var safari = this.getAttribute("s");
        var hf = "";
        
        if(safari == "safari")
            hf = "|" + page + "|SAFARI";
        else
            hf = "|" + page + "|WEBVIEW";
        
        window.location.href = hf;
        return false; 
     }); 
     
     $("*[nbel='html']").click(function(e){
         var page = this.getAttribute("u");
         page = page.substr(page.lastIndexOf("/")+1, page.length);
         
         var hf = "|" + page + "|HTML";
         window.location.href = hf;
         return false; 
      }); 
     
     $("*[nbel='tagicon']").each(function(index, ele){
      	if(index == 0) {
      		ele.style.zIndex = 1;
      	} else {
      		ele.style.zIndex = 0;
      	}
      	
     	 
     	 $(ele).click(function(e){
    	        if($(document).data("TAG_STATUS") != 1){
    	        	var idStr = this.id;
    	        	idStr = "[cType='"+idStr+"']";
    	            var tagthumbs = $("div[nbel='tagthumb']"+idStr);
    	            var firstimg = tagthumbs.attr("u");

                 
    	            $(document).data("TAG_STATUS", 1);   // 1: 태그 상태, 0: 일반 상태
                 
                 this.style.zIndex = 0;
                 //tagthumbs[0].style.zIndex = 1;
                 tagthumbs.each(function(idx, el){
                     el.style.zIndex = 999999;
                 });
                 
                 $("*[nbel='map'][tagmap='tagmap']").each(function(index, ele){
                     this.style.opacity = 1;
                     this.style.zIndex = 1;                    
                 }); 
                 
                 var tp = $('<div id="tagdiv" style="width: 768px; height: 1024px; position: absolute; left: 0px; top: 0px; background-image: url(./'+firstimg+'); background-repeat: no-repeat no-repeat; z-index: 999998"></div>');

                 $("#canvasbg").append(tp);
                 
                  var tagthumbs = $("div[nbel='tagthumb']"+idStr);
      
     		 	tagthumbs.each(function(index, ele){
         
         		imagePreLoad(tagthumbs.get(index).getAttribute("u"));
         
         		$(ele).click(function(){
             if(tagthumbs.length == (index + 1)){    // Last(close)
                 if($(document).data("TAG_STATUS") == 1){
                     /*document.getElementById("canvas").style.backgroundImage = "";
                     document.getElementById("canvasbg").style.backgroundImage = "url("+$(document).data("BG_IMG")+")";
                 	
                     $("*[nbel='tagicon']").css("opacity", 1);
                     $("*[nbel='tagicon']").css("z-index", 1);*/
                     $(document).data("TAG_STATUS", 0);


                     $("*[nbel='tagicon']").css("z-index", 1);              
                     $("*[nbel='tagthumb']").css("z-index", -1);
                     
                     $("*[nbel='map'][tagmap='tagmap']").each(function(index, ele){
                         this.style.opacity = 0;
                         this.style.zIndex = 0;                    
                     }); 
                                     
                     $("#tagdiv").remove();
                 }
             } else {
                 if($(document).data("TAG_STATUS") == 1){
                 	/*ele.style.zIndex = 1;
                     document.getElementById("canvasbg").style.backgroundImage = "url("+tagthumbs.get(index+1).getAttribute("u")+")";*/
                     
                     document.getElementById("tagdiv").style.backgroundImage = "url("+tagthumbs.get(index+1).getAttribute("u")+")";
                 }
             }
             return false;
         });
      });
    	        }
    	        
    	        return false; 
    	     });
      });
     
     //$("*[nbel]").css("-webkit-tap-highlight-color", "rgba(0, 0, 0, 0)");
     
     //window.location.href = "|FINISHED";
});